<template>
  <section class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <input
        class="new-todo"
        placeholder="What needs to be done?"
        autofocus
        v-model="name"
        @keyup.enter="addList"
      />
    </header>

    <section class="main">
      <input
        id="toggle-all"
        class="toggle-all"
        type="checkbox"
        v-model="isAll"
      />
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <!-- 不要忘了吧曾经渲染给data.list换成renderList -->
        <li
          :class="{ completed: item.flag }"
          v-for="item in renderList"
          :key="item.id"
        >
          <div class="view">
            <input class="toggle" type="checkbox" v-model="item.flag" />
            <label>{{ item.name }}</label>
            <button class="destroy" @click="handleDelete(item.id)"></button>
          </div>
          <input class="edit" value="Create a TodoMVC template" />
        </li>
      </ul>
    </section>
    <!-- v-if="data.list.length > 0 " -->
    <footer class="footer" v-if="isShowFooter">
      <span class="todo-count"
        ><strong>{{ leftCounts }}</strong> item left</span
      >
      <ul class="filters">
        <!-- 绑定点击事件,把当前的item给active -->
        <li v-for="item in data.arr" :key="item" @click="data.active = item">
          <!-- 用active和循环时候的item项做笔记,如果一样就使用selected -->
          <a :class="{ selected: item === data.active }" href="#/">{{
            item
          }}</a>
        </li>
      </ul>
      <button
        class="clear-completed"
        v-if="isShowClear"
        @click="clearCompleted"
      >
        Clear completed
      </button>
    </footer>
  </section>
</template>
<script setup>
import { computed, reactive, ref, watch } from 'vue'

//循环列表
const data = reactive({
  //不要忘了在初始化数据本地存储完之后的时候取一下
  list: JSON.parse(localStorage.getItem('🌹🌹🌹')) || [
    { id: 1, name: '吃饭', flag: true },
    { id: 2, name: '睡觉', flag: false },
    { id: 3, name: '打豆豆', flag: true },
  ],
  arr: ['All', 'Active', 'Completed'],
  active: localStorage.getItem('ACTIVE') || 'All',
})

//根据ID去删除
const handleDelete = (id) => {
  data.list = data.list.filter((item) => item.id != id)
}

//建立ref变量
const name = ref('')

//敲回车的时候加工成对象添加
const addList = () => {
  if (name.value.trim().length === 0) return alert('内容不能为空')
  data.list.unshift({ id: Date.now(), name: name.value, flag: false })
  name.value = ''
}

//统计剩余数据
const leftCounts = computed(() => {
  return data.list.filter((item) => !item.flag).length
})
const isShowFooter = computed(() => {
  return data.list.length > 0
})
const isShowClear = computed(() => {
  return data.list.filter((item) => item.flag).length > 0
})
const clearCompleted = () => {
  data.list = data.list.filter((item) => !item.flag)
}
const isAll = computed({
  get() {
    //先确定全选的状态
    return data.list.every((item) => item.flag)
  },
  set(newValue) {
    //把选中后的结果给每一个单选
    data.list.forEach((item) => (item.flag = newValue))
  },
})
// 根据data.active产生一个数据，渲染的是这个新数据
const renderList = computed(() => {
  if (data.active === 'Active') {
    return data.list.filter((item) => !item.flag)
  }
  if (data.active === 'Completed') {
    return data.list.filter((item) => item.flag)
  }
  return data.list
})
//监听data.list的变化做一些操作(存储到本地)
//data.list是一个reactive,监听的是内部数据的变化
watch(
  () => data.list, //对本身修改监听的到,把data.list当做普通值去监听
  (newValue) => {
    localStorage.setItem('🌹🌹🌹', JSON.stringify(newValue))
  },
  { deep: true } //对内容修改监听的到
)
//对点击的active监听
watch(
  () => data.active,
  (newValue) => {
    localStorage.setItem('ACTIVE', newValue)
  }
)
</script>
